<template>
	<NavBar :obj="{ title: '我的入股', color: '#000', backgroundColor: '#fff'}"  />

	<view class="container">
		<view class="infos flex items-center justify-between" v-for="(item, index) in list" :key="index">
			<view class="photo">
				<image :src="imgUrl + item.cover"></image>
			</view>
			<view class="composite flex-1 flex-col">
				<view class="top flex items-center">
					<view class="nickname line-1-clamp">{{ item.title }}</view>
				</view>
				<view class="bottom">
					<view class="item flex items-center">
						<image src="/static/profile/ic_gurend.png" class="icon"></image>
						<text>{{ item.shopkeeper }}</text>
					</view>
				</view>

				<view class="bottom">
					<view class="item flex items-center">
						<image src="/static/profile/ic_guphoned.png" class="icon"></image>
						<text>{{ item.mobile }}</text>
					</view>
				</view>
			</view>
		
		</view>

		<view class="show-load" v-if="showLoad" style="padding: 30upx">
			<up-loading-icon text="加载中" textSize="13"></up-loading-icon>
		</view>
		<up-empty v-if="!list.length && !showLoad" icon="/static/product/ic_zerodata@2x.png" iconSize="392rpx" marginTop="50%" text="暂无" />
	</view>
</template>

<script setup>
	import { ref, nextTick, reactive } from 'vue';
	import { port, imgUrl, goUrl, hint, loading, closeLoading, goBack, goIndex } from '../../service/port';
	import { onLoad, onShow, onReachBottom } from '@dcloudio/uni-app';

	const showLoad = ref(false);
	const list = ref([]);
	const page = ref(1);



	async function myShareholderShop() {
		let res = await port('myShareholderShop', { page: page.value });
		showLoad.value = false;
		if (res.data.length) {
			list.value = [...list.value, ...res.data];
			page.value++;
		}
	}
	onShow(() => {
		page.value = 1;
		list.value.length = 0;
		showLoad.value = true;
		myShareholderShop();
	});

	onReachBottom(() => {
		myShareholderShop();
	});
</script>

<style scoped lang="scss">
	:global(page) {
		background-color: #f0f0f0;
	}

	.container {
		margin: 30rpx;
	}

	.infos {
		background: #ffffff;
		border-radius: 16rpx;
		padding: 24rpx;
		margin-bottom: 24rpx;
		.photo {
			background: #f2f2f2;
			border-radius: 16rpx;
			width: 128rpx;
			height: 128rpx;
			> image {
				width: 100%;
				height: 100%;
				border-radius: 16rpx;
			}
		}

		.right {
			.quotas {
				font-weight: 400;
				font-size: 22rpx;
				color: #999999;
				margin-bottom: 15rpx;
				> text {
					font-weight: 500;
					font-size: 30rpx;
					color: #f81a2e;
					margin-left: 5rpx;
				}
			}
			.right-btn {
				> text {
					font-weight: 500;
					font-size: 28rpx;
					color: #ffffff;
					background: linear-gradient(-90deg, #f81a2e 0%, #fc4856 100%);
					border-radius: 10rpx;
					padding: 8rpx 30rpx;
				}
			}
		}

		.composite {
			margin-left: 22rpx;
			.top {
				.nickname {
					font-weight: 500;
					font-size: 30rpx;
					color: #000000;
				}
			}

			.bottom {
				.item {
					&:first-child {
						margin: 5rpx 0;
					}
					.icon {
						width: 20rpx;
						height: 24rpx;
						margin-right: 10rpx;
					}
					> text {
						font-weight: 400;
						font-size: 24rpx;
						color: #999999;
					}
				}
			}
		}
	}
</style>
